import PropTypes from "prop-types"
import React, { memo, useRef, useState } from "react"
import { ItemWrapper } from "./style"
import { Rating } from "@mui/material"
import { Carousel } from "antd"

import IconArrowLeft from "@/assets/svg/icon-arrow-left"
import IconArrowRight from "@/assets/svg/icon-arrow-right"
import { IndicatorWrapper } from "@/base-ui/indicator/style"
import Indicator from "@/base-ui/indicator"
const RoomItem = memo((props) => {
    const [selectIndex, setSelectIndex] = useState(0)
    // 解构props中的itemData
    const { itemData, itemwidth = "25%", itemClick } = props
    const CarouselRef = useRef()
    // 点击按钮
    const handleClick = (e, isRight = true) => {
        e.stopPropagation()
        // 翻页
        isRight ? CarouselRef.current.next() : CarouselRef.current.prev()
        // 指示点跳转
        let newIndex = isRight ? selectIndex + 1 : selectIndex - 1
        const length = itemData.picture_urls.length
        // 实现跳转循环
        if (newIndex < 0) newIndex = length - 1
        if (newIndex > length - 1) newIndex = 0
        setSelectIndex(newIndex)
    }

    // 点击item
    const itemHandleClick = (e) => {
        if (itemClick) itemClick(itemData)
    }

    // 普通图片
    const nomalPicture = (
        <div className="cover">
            <img src={itemData.picture_url} alt="" />
        </div>
    )
    // 轮播图
    const sliderPicture = (
        <div className="slider">
            <div className="controls">
                <div
                    className="btn left"
                    onClick={(e) => {
                        handleClick(e, false)
                    }}
                >
                    <IconArrowLeft width="30" height="30" />
                </div>
                <div
                    className="btn right"
                    onClick={(e) => {
                        handleClick(e, true)
                    }}
                >
                    <IconArrowRight width="30" height="30" />
                </div>
            </div>
            {/* 指示点 */}
            <div className="indicator">
                <Indicator selectIndex={selectIndex}>
                    {itemData?.picture_urls?.map((item, index) => {
                        return (
                            <div className="dot-item" key={item}>
                                <span
                                    className={`dot ${
                                        selectIndex === index ? "active" : ""
                                    }`}
                                ></span>
                            </div>
                        )
                    })}
                </Indicator>
            </div>
            <Carousel dots={false} ref={CarouselRef}>
                {itemData?.picture_urls?.map((item) => {
                    return (
                        <div className="cover" key={item}>
                            <img src={item} alt="" />
                        </div>
                    )
                })}
            </Carousel>
        </div>
    )
    return (
        <ItemWrapper
            verifycolor={itemData?.verify_info?.text_color || "#39576a"}
            itemwidth={itemwidth}
            onClick={itemHandleClick}
        >
            <div className="inner">
                {/* 图片 */}
                {!!itemData.picture_urls ? sliderPicture : nomalPicture}
                {/* 描述 */}
                <div className="desc">
                    {/* 将verify_info中的messages数组用' · '连接成字符串 */}
                    {itemData.verify_info.messages.join(" · ")}
                </div>
                {/* 显示房间名 */}
                <div className="name">{itemData.name}</div>
                {/* 显示价格 */}
                <div className="price">￥{itemData.price}/晚</div>
                <div className="bottom">
                    <Rating
                        name="half-rating"
                        precision={0.5}
                        // 如果star_rating存在，则使用star_rating的值，否则使用默认值5
                        value={itemData.star_rating ? itemData.star_rating : 5}
                        size="small"
                        sx={{ fontSize: "12px", color: "green" }}
                        readOnly
                    />
                    {/* 显示评论数量 */}
                    <span className="count">{itemData.reviews_count}</span>
                    {/* 显示额外信息的内容 */}
                    <span className="extra">
                        {itemData?.bottom_info?.content}
                    </span>
                </div>
            </div>
            <Indicator></Indicator>
        </ItemWrapper>
    )
})

RoomItem.propTypes = {
    itemData: PropTypes.object, // 指定itemData为object类型
}

export default RoomItem
